<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    div{
        width:200px;
        height: 300px;
    }
    .content li{
        list-style: none;
        width: 200px;
        height: 180px;
        padding:10px;
        display: none;
        float:left;
        border: 1px solid #ccc;
    }
    .tab li{
        width:50px;
        height:40px;
        list-style: none;
        float: left;
        padding: 3px 5px;
        margin: 0;
    }
    .tab li.active {
	color:mediumspringgreen;
    border-bottom:2px solid mediumspringgreen;
    }
    /* .tab li:hover{
        background-color:red;
    } */
</style>
<body>
    <div>
        <ul class="tab">
            <li class="active">tab1</li>
            <li>tab2</li>
        </ul>
        <ul class="content">
            <li style="display: block;">11111111111111111111</li>
            <li>2222222222222222222</li>
        </ul>
    </div>
</body>
<script>
    $('.tab').find('li').click(function(){
        var index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.content').find('li').eq(index).show().siblings().hide();
        $(".tab li").css({"color":"#000"})
        $(this).css({"color":"mediumspringgreen"})
    })
</script>
</html>